<template>
  <div
    v-if="formItem"
    class="filter-field-content">
    <el-select
      v-if="formItem.formType === 'checkStatus'
        || formItem.formType === 'dealStatus'
        || formItem.fieldName === 'invoiceStatus'
        || formItem.fieldName === 'receivedStatus'
        || (formItem.formType === 'select' && getSettingValueType(formItem.setting) != 'string')"
      v-model="formItem.value"
      placeholder="请选择筛选条件"
      @change="emitChange">
      <el-option
        v-for="item in formItem.setting"
        :key="item.value"
        :label="(item.name || item.label)"
        :value="item.value" />
    </el-select>
    <el-select
      v-else-if="formItem.formType === 'checkbox' && getSettingValueType(formItem.setting) != 'string'"
      v-model="formItem.value"
      placeholder="请选择筛选条件"
      @change="emitChange">
      <el-option
        v-for="item in formItem.setting"
        :key="item.value"
        :label="(item.name || item.label)"
        :value="item.value" />
    </el-select>
    <el-select
      v-else-if="['select', 'checkbox', 'field_tag'].includes(formItem.formType)"
      v-model="formItem.value"
      placeholder="请选择筛选条件"
      @change="emitChange">
      <el-option
        v-for="item in formItem.setting"
        :key="item"
        :label="item"
        :value="item" />
    </el-select>
    <el-select
      v-else-if="formItem.formType === 'field_attention'"
      v-model="formItem.value"
      placeholder="请选择筛选条件"
      @change="emitChange">
      <el-option
        v-for="item in formItem.setting"
        :key="item.value"
        :label="item.name"
        :value="item.value" />
    </el-select>
    <template
      v-else-if="formItem.formType == 'number' ||
        formItem.formType == 'floatnumber' ||
        formItem.formType == 'percent'">
      <div v-if="formItem.type === 14" class="date-range-value">
        <el-input-number
          v-model="formItem.min"
          :controls="false"
          class="small"
          @change="emitChange" />
        <span>-</span>
        <el-input-number
          v-model="formItem.max"
          :controls="false"
          class="small"
          @change="emitChange" />
      </div>
      <el-input-number
        v-else
        v-model="formItem.value"
        :controls="false"
        style="width: 100%;"
        class="small"
        @change="emitChange" />
    </template>
    <template v-else-if="formItem.formType === 'date' || formItem.formType === 'datetime'">
      <el-date-picker
        v-show="formItem.type === 14"
        ref="wkDatePicker"
        v-model="formItem.range"
        :picker-options="getPickerOptions(formItem)"
        :type="formItem.formType === 'date' ? 'daterange' : 'datetimerange'"
        :value-format="formItem.formType === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        @change="datePickerChange(formItem)" />
      <div
        v-if="formItem.timeType"
        class="date-range-content"
        @click="dateRangeSelect(formItem)">{{ formItem.timeTypeName }}</div>
      <el-date-picker
        v-show="formItem.type !== 14"
        v-model="formItem.value"
        :value-format="formItem.formType === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
        :type="formItem.formType"
        placeholder="选择日期"
        @change="emitChange" />
    </template>
    <template
      v-else-if="['flowGroup', 'business_cause'].includes(formItem.formType)">
      <el-select
        v-model="formItem.flowName"
        @change="typeOptionsChange(formItem)">
        <el-option
          v-for="item in formItem.typeOption"
          :key="item.flowId"
          :label="item.flowName"
          :value="item.flowName" />
      </el-select>

      <el-select
        v-model="formItem.settingName"
        style="margin-top: 8px;"
        @change="emitChange">
        <el-option
          v-for="item in formItem.settingList"
          :key="item.settingId"
          :label="item.settingName"
          :value="item.settingName" />
      </el-select>
    </template>
    <wk-user-dialog-select
      v-else-if="formItem.formType === 'user' || formItem.formType === 'single_user'"
      v-model="formItem.value"
      :radio="false"
      style="width: 100%;"
      @change="userDepChange(formItem, arguments[0], arguments[1])" />
    <wk-dept-dialog-select
      v-else-if="formItem.formType === 'structure'"
      v-model="formItem.value"
      :radio="false"
      style="width: 100%;"
      @change="userDepChange(formItem, arguments[0], arguments[1])" />
    <el-switch
      v-else-if="formItem.formType == 'boolean_value'"
      v-model="formItem.value"
      active-value="1"
      inactive-value="0"
      @change="emitChange" />
    <wk-product-category
      v-else-if="formItem.fieldName === 'productTypeId'"
      :item="formItem"
      :value="formItem.value"
      type="jxc"
      @change="arrayValueChange" />
    <xh-prouct-cate
      v-else-if="formItem.formType === 'category'"
      :item="formItem"
      :value="formItem.value"
      @value-change="arrayValueChange" />
    <v-distpicker
      v-else-if="formItem.formType === 'map_address'"
      :province="formItem.address.state"
      :city="formItem.address.city"
      :area="formItem.address.area"
      @province="selectProvince($event,formItem)"
      @city="selectCity($event,formItem)"
      @area="selectArea($event,formItem)" />
    <wk-position
      v-else-if="formItem.formType == 'position'"
      v-model="formItem.value"
      :show-detail="false"
      :props="{ checkStrictly: true }"
      @change="emitChange" />
    <el-input
      v-else
      v-model="formItem.value"
      placeholder="多个条件请用；隔开"
      @change="emitChange" />
  </div>
</template>

<script>
import { XhProuctCate } from '@/components/CreateCom'
import WkUserDialogSelect from '@/components/NewCom/WkUserDialogSelect'
import WkDeptDialogSelect from '@/components/NewCom/WkDeptDialogSelect'
import WkProductCategory from '@/components/NewCom/WkProductCategory'
import VDistpicker from '@/components/VDistpicker'
import WkPosition from '@/components/NewCom/WkPosition'

import { timeTypeShortcuts, getFilterPostData } from './utils'

export default {
  // 筛选值输入
  name: 'FilterFieldContent',

  components: {
    WkUserDialogSelect,
    XhProuctCate,
    WkProductCategory,
    VDistpicker,
    WkDeptDialogSelect,
    WkPosition
  },

  props: {
    condition: Number,
    formItem: Object
  },

  data() {
    return {
    }
  },

  computed: {},

  watch: {
    condition() {
      this.formItem.type = this.condition
    }
  },

  created() {},

  mounted() {},

  beforeDestroy() {},

  methods: {
    /**
     * 获取setting数据类型
     */
    getSettingValueType(setting) {
      if (setting && setting.length > 0) {
        const value = setting[0]
        return typeof value
      }
      return []
    },

    /**
     * 位置更改
     */
    selectProvince(data, formItem) {
      formItem.address.state = data.value
      this.emitChange()
    },
    selectCity(data, formItem) {
      formItem.address.city = data.value
      this.emitChange()
    },
    selectArea(data, formItem) {
      formItem.address.area = data.value
      this.emitChange()
    },

    /**
     * 用户创建人
     * 产品类别
     */
    arrayValueChange(data) {
      if (data.value.length > 0) {
        data.item.value = data.value
        data.item.valueContent = data.valueContent
      } else {
        data.item.value = []
      }
      this.emitChange(data)
    },

    /**
     * 用户部门change
     */
    userDepChange(formItem, dataIds, data) {
      // 用于部门员工的展示
      formItem.valueContent = data
      this.emitChange()
    },

    /**
     * 聚焦datepicker
     */
    dateRangeSelect(formItem) {
      const datePicker = this.$refs.wkDatePicker
      this.$nextTick(() => {
        datePicker.focus()
        datePicker.pickerVisible = true
      })
    },

    /**
     * datepicker change
     */
    datePickerChange(formItem) {
      formItem.timeTypeName = ''
      formItem.timeType = ''
      this.emitChange()
    },

    /**
     * 时间筛选配置
     */
    getPickerOptions(item) {
      const types = timeTypeShortcuts
      const shortcuts = []
      for (let index = 0; index < types.length; index++) {
        const element = types[index]
        shortcuts.push({
          text: element.text,
          onClick: (picker) => {
            picker.$emit('pick', [], false)
            this.$nextTick(() => {
              item.timeTypeName = element.text
              item.timeType = element.value
            })
          }
        })
      }

      return {
        shortcuts: shortcuts
      }
    },

    /**
     * @description: 获取筛选post格式的值
     * @return {*}
     */
    getPostData() {
      const results = getFilterPostData([this.formItem])
      return results[0]
    },

    /**
     * @description: 提示编辑
     * @return {*}
     */
    emitChange() {
      this.$emit('change', ...arguments)
    },

    /**
     * 商机组状态
     */
    typeOptionsChange(formItem) {
      if (formItem.flowName) {
        const obj = formItem.typeOption.find(item => {
          return item.flowName === formItem.flowName
        })
        formItem.settingList = obj.settingList || []
      } else {
        formItem.settingList = []
      }
      formItem.settingName = ''
      this.emitChange()
    }

  }
}
</script>

<style lang="scss" scoped>
.filter-field-content {
  position: relative;

  .el-select,
  .el-date-editor {
    width: 100%;

    ::v-deep .el-range__icon {
      line-height: 26px;
    }
  }

  .el-input-number {
    width: 100%;

    ::v-deep input {
      padding: 0 8px;
      text-align: left;
    }
  }

  .date-range-content {
    position: absolute;
    top: 2px;
    right: 30px;
    left: 30px;
    height: $--input-height - 4;
    line-height: $--input-height - 4;
    cursor: pointer;
    background-color: $--input-background-color;
  }

  .date-range-value {
    display: flex;
    align-content: space-around;

    .el-input-number {
      flex: 1;
      width: auto;
    }

    span {
      flex-shrink: 0;
      padding: 0 4px;
    }
  }
}
</style>
